<template>
  <div>
    <!-- <div class="ser_div">
      <el-row> 
        
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 仓库 </el-col>
            <el-col :span="16">
              <el-select
                 style="width: 100%"
                v-model="ser.warehouse_id"
                placeholder="请选择仓库"
              >
                <el-option
                  v-for="(item, index) in cangkulist"
                  :key="index"
                  :label="item.warehouse_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>  
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.product_id"
                placeholder="请选择产品"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in productList"
                  :key="index"
                  :label="item.product_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col v-if="product_modelid=='床头'">
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.model_number_id"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ModelNumberList"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col v-if="product_modelid=='床头'||product_modelid=='床头柜'">
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 颜色 </el-col>
            <el-col :span="16">
              <el-select
                clearable
                filterable
                allow-create
                v-model="ser.color_id"
                placeholder="请选择颜色"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ColorList"
                  :key="index"
                  :label="item.color"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col v-if="product_modelid=='床头'|| product_modelid=='床帮'|| product_modelid=='床板'">
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center">规格</el-col>
            <el-col :span="16">
              <el-select
                filterable
                clearable
                v-model="ser.specification_id"
                placeholder="请选择规格"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in SpecificationList"
                  :key="index"
                  :label="item.specification"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>

        <el-col>
          <el-button @click="search" class="add_btn" icon="el-icon-search"
            >查询</el-button
          >
         <el-button @click="add_product" icon="el-icon-plus" class="add_btn">批量添加到成品库</el-button>
        </el-col>
      </el-row>
    </div> -->

    <el-table :data="dataList" v-loading="loading" style="width: 100%;margin-top: 20px;" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.goods_shelf_list" style="margin-left:25px;">
            <el-table-column type="expand">
              <template slot-scope="propss">
                <el-table :data="propss.row.model_number_list" style="margin-left:25px;">
                  <el-table-column type="expand">
                    <template slot-scope="propsss">
                      <el-table :data="propsss.row.specification_list" style="margin-left:25px;">
                        <el-table-column label="规格">
                          <template slot-scope="scope">
                            <span style="cursor:pointer;" @click="huojia_click_guige(scope.row.warehouse_id,scope.row.goods_shelf_id,scope.row.model_number_id,scope.row.specification.specification_id)"> {{ scope.row.specification.specification }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="数量">
                          <template slot-scope="scope">
                            {{ scope.row.count }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column label="型号">
                    <template slot-scope="scope">
                      <span style="cursor:pointer;" @click="huojia_click_xinghao(scope.row.warehouse_id,scope.row.goods_shelf_id,scope.row.model_number.id)"> {{ scope.row.model_number.model_number }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量">
                    <template slot-scope="scope">
                      {{ scope.row.count }}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="货架名称">
              <template slot-scope="scope">
                <span style="cursor:pointer;" @click="huojia_click_huojia(scope.row.warehouse_id,scope.row.goods_shelf.id)">{{ scope.row.goods_shelf.goods_shelf_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                {{ scope.row.count }}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="仓库名称">
        <template slot-scope="scope">
          <span style="cursor:pointer;" @click="huojia_click_cangku(scope.row.warehouse_id)"> {{ scope.row.warehouse.warehouse_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量">
        <template slot-scope="scope">
          {{ scope.row.count }}
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {
  getSemiFinishProductList,
  // getCustomerList,
  // getProductList,
  // getWarehouseList,
  // getModelNumberList,
  // getColorList,
} from "@/api/product/index";
export default {
  data() {
    return {
      ser: {
        modelid: '',
        product_id: "",
        warehouse_id: '',
        specification_id: '',
        model_number_id: '',
        color_id: ''
      },
      cangkulist: [],
      loading: true,
      productList: [],
      dataList: [],
      ModelNumberList: [],
      ColorList: [],
      SpecificationList: [],
      product_modelid: ''
    };
  },
  mounted() {
    this.getlist()
    // this.getcangku()
    // this.getproduct();
    // this.getModel()
    // this.get_ColorList()
    // this.get_SpecificationList()
  },
  // watch:{
  //   "ser.product_id"(news,olds){
  //     console.log(news)
  //      this.productList.forEach(item=>{
  //       if(news==item.id){
  //           this.product_modelid=item.product_models.modelname
  //           this.ser.modelid=item.modelid
  //       }
  //      })
  //   },
  // },
  methods: {
    huojia_click_cangku(id){
      this.$router.push({
        name: "index_DS",
        path: "/index_DS",
        query: {
          warehouse_id:id
        }
      });
    },
     huojia_click_huojia(id,ids){
      this.$router.push({
        name: "index_DS",
        path: "/index_DS",
        query: {
          warehouse_id:id,
          goods_shelf_id:ids
        }
      });
    },
    huojia_click_xinghao(id,ids,idss){
      this.$router.push({
        name: "index_DS",
        path: "/index_DS",
        query: {
          warehouse_id:id,
          goods_shelf_id:ids,
          model_number_id:idss
        }
      });
    },
    huojia_click_guige(id,ids,idss,idsss){
      this.$router.push({
        name: "index_DS",
        path: "/index_DS",
        query: {
            warehouse_id:id,
            goods_shelf_id:ids,
            model_number_id:idss,
            specification_id:idsss
        }
      });
    },
    get_ColorList() {
      getColorList({ per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data.data;
        }
      });
    },
    // 型号列表
    getModel() {
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
        }
      });
    },
    getcangku() {
      getWarehouseList({ warehouse_type_id: 1 }).then((res) => {
        if (res.code == 200) {
          this.cangkulist = res.data.data;
          this.ser.warehouse_id = this.cangkulist[0].id
          this.getlist();
        }
      });
    },
    push_more(id) {
      this.$router.push({
        name: "index_more",
        path: "/index_more",
        query: {
          data: id
        }
      });
    },
    // 指定查询
    search() {
      getSemiFinishProductList(this.ser).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
        }
      });
    },
    //客户列表
    getCustomer() {
      getCustomerList({ per_page: 99999 }).then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data.data;
        }
      });
    },
    //产品列表
    getproduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.ser.product_id = this.productList[0].id
          this.ser.model_number_id = ''
          this.ser.color_id = ''
          this.ser.specification_id = ''
        }
      });
    },
    getlist() {
      getSemiFinishProductList().then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style scoped>
.d {
  color: black !important;
}

.el-table {
  margin-top: 0px;
  
}
</style>
